<template>
    <div id="app">
        <welcome></welcome>
        <div>
            <mt-field v-model="value" placeholder="输入歌曲名称或歌手姓名"></mt-field>
            <mt-button type="primary" v-on:click="search">搜索</mt-button>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import Welcome from './components/Welcome.vue'

    export default {
        name: 'app',
        data: function () {
            return {
                value: ''
            }
        },
        components: {
            Welcome
        },
        methods: {
            search() {
                if (!this.value) {
                    Toast({
                        message: '搜索关键字不能为空',
                        position: 'bottom'
                    });
                    return;
                }
                this.toSongs();
            },
            toSongs() {
                this.$router.push({path: `/songs/${this.value}`});
            }
        }
    }
</script>

<style>

</style>
